<template>
  <div class="user">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item>
        <el-input
            clearable
            v-model="searchParam.name"
            placeholder="名称"
        />
      </el-form-item>
      <el-form-item style="width: 300px">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="addView(null)">添加反馈记录类型</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.feedbackRecordTypes" border style="width: 100%" v-loading="data.loading"
              element-loading-text="拼命加载中">
      <el-table-column prop="name" label="名称" align="center" width="150px"/>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230" align="center">
        <template #default="scope">
          <el-button
              class="button-space"
              @click="addView(scope.row)"
              type="success"
              size="small"
          >编辑
          </el-button>
          <el-popconfirm
              title="你确定要删除该反馈记录类型吗？"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="deleteFeedbackRecordType(scope.row.uuid)"
          >
            <template #reference>
              <el-button
                  class="button-space"
                  type="danger"
                  size="small"
              >删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="data.total"
        style="text-align: center; margin-top: 10px"
        @current-change="currentChange"
    >
    </el-pagination>
    <!-- 添加或修改反馈记录类型 -->
    <el-dialog :title="data.title" v-model="data.feedbackRecordTypeAddOrUpdateDisable">
      <el-form :model="feedbackRecordTypeAddOrUpdateData" :rules="rules" ref="addFormRef">
        <el-form-item label="名称" label-width="130px" prop="name">
          <el-input v-model="feedbackRecordTypeAddOrUpdateData.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label-width="130px">
          <el-button @click="data.feedbackRecordTypeAddOrUpdateDisable = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateFeedbackRecordType">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {onMounted, reactive, ref} from "vue";
import {page, deleted, add, update} from "@/api/feedbackRecord/feedbackRecordType";
import {ElMessage} from "element-plus";

export default {
  setup() {
    const searchParam = reactive({
      name: '',
      page: 1,
      size: 10
    })
    const data = reactive({
      feedbackRecordTypes: [],
      total: 0,
      loading: false,
      feedbackRecordTypeAddOrUpdateDisable: false,
      title: '',
    })
    const feedbackRecordTypeAddOrUpdateData = reactive({
      name: '',
      uuid: ''
    })
    const rules = reactive({
      name: [
        {
          required: true,
          message: "请输入反馈记录类型名称",
          trigger: "blur",
        },
      ]
    })
    /**
     * 分页查询反馈记录类型
     * @returns {Promise<void>}
     */
    const pageSearchFeedbackRecordType = async () => {
      data.loading = true
      page(searchParam).then(res => {
        data.feedbackRecordTypes = res.data.records
        data.total = res.data.total
      }).finally(() => {
        data.loading = false
      })
    }

    /**
     * 删除反馈记录类型
     * @param uuid
     * @returns {Promise<void>}
     */
    const deleteFeedbackRecordType = async (uuid) => {
      deleted(uuid).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        pageSearchFeedbackRecordType()
      })
    }
    /**
     * 搜索查询反馈记录类型
     * @returns {Promise<void>}
     */
    const search = async () => {
      page(searchParam).then(res => {
        data.feedbackRecordTypes = res.data.records
        data.total = res.data.total
      })
    }
    /**
     * 添加页面展示
     * @returns {Promise<void>}
     */
    const addView = async (row) => {
      data.feedbackRecordTypeAddOrUpdateDisable = true
      if (row != null) {
        data.title = '编辑'
        feedbackRecordTypeAddOrUpdateData.name = row.name
        feedbackRecordTypeAddOrUpdateData.uuid = row.uuid
      } else {
        data.title = '添加'
        feedbackRecordTypeAddOrUpdateData.name = ''
        feedbackRecordTypeAddOrUpdateData.uuid = ''
      }
    }
    const addFormRef = ref(null)
    /**
     * 添加反馈记录类型
     * @returns {Promise<void>}
     */
    const addOrUpdateFeedbackRecordType = async () => {
      addFormRef.value.validate((valid) => {
        if (!valid) {
          return false
        }
        if (feedbackRecordTypeAddOrUpdateData.uuid) {
          update(feedbackRecordTypeAddOrUpdateData).then(() => {
            ElMessage({
              message: '修改成功',
              type: 'success',
            })
            data.feedbackRecordTypeAddOrUpdateDisable = false
            pageSearchFeedbackRecordType()
          })
        } else {
          add(feedbackRecordTypeAddOrUpdateData).then(() => {
            ElMessage({
              message: '添加成功',
              type: 'success',
            })
            data.feedbackRecordTypeAddOrUpdateDisable = false
            pageSearchFeedbackRecordType()
          })
        }
      })
    }
    onMounted(() => {
      pageSearchFeedbackRecordType()
    })
    return {
      data,
      searchParam,
      feedbackRecordTypeAddOrUpdateData,
      rules,
      addFormRef,
      search,
      deleteFeedbackRecordType,
      addView,
      addOrUpdateFeedbackRecordType
    }
  }
}
</script>

<style scoped>

</style>